<template>
  <div>
    <h2>事件绑定指令</h2>
    <p>{{ age }}</p>
    <!--事件绑定指令语法： v-on:事件名="处理程序" v-on:可以简化成@  -->
    <!-- <button v-on:事件名="处理程序">按钮</button> -->
    <!-- <button @事件名="处理程序">按钮</button> -->

    <!-- 事件处理程序，如果代码非常简单，直接写到 <template> 这个区域即可 -->
    <!-- 处理程序，代码只能使用vue中定义好的 data 数据 或 methods 方法 -->
    <button @click="age++">+1</button>

    <!-- 事件处理程序，如果代码非常多，可以用方法，必须定义到和data平级的nethods中 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      age:20
    }
  },
  // methods 是储存方法的
  methods: {
    changeAge () {
      // vue中，找data数据 methods方法...都是通过this直接找（这是vue中固定的语法）
      this.age--
      console.log(123)
    }
  },
}
</script>

<style>

</style>
